// ----------------------------------页面渲染----------------------------
function render() {
    $.ajax({
        url: '/my/category/list',
        success: function (res) {
           // 使用模板引擎渲染
           let arr = [];
           res.data.forEach(item => {
               arr.push(`<tr>
               <td>${item.name}</td>
               <td>${item.alias}</td>
               <td>
                   <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
                   <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger" >删除</button>
               </td>
           </tr>`);
           })
           $('tbody').html(arr.join(''))
        }
    })
}
render()



// --------------------------------  删除分类 ------------------------------
$('tbody').on('click', 'button:contains("删除")', function () {
    let id = $(this).data('id')
    // 询问是否要删除
    layer.confirm('确认删除', function(index){
        //do something
        // 点击确定，这个函数触发了

        $.ajax({
            url: '/my/category/delete',
            data: {
                id:id
            },
            success: function (res) {
                 // 无论删除成功，还是失败，都给出提示
                 layer.msg(res.message);
                 // 删除成功，重新渲染页面
                if (res.status == 0) {
                    render()
                }
            }
        })

        
        layer.close(index);
      });
})




// --------------------------------  添加操作 ------------------------------------
let index
$('button:contains("添加类别")').on('click', function () {
    index = layer.open({
        type: 1,
        title: '类别管理',
        content:$('#tpl-add').html(),
         area: ['500px', '250px']
      });
})



// -------------------------------表单提交，完成添加----------------------------
$('body').on('submit', '#form-add', function (e) {
    // 阻止默认行为
    e.preventDefault()

    let data = $(this).serialize()
    $.ajax({
        type: 'post',
        url: '/my/category/add',
        data: data,
        success: function (res) {
            // 无论删除成功，还是失败，都给出提示
            layer.msg(res.message);
            // 判断是否成功
            if (res.status == 0) {
                // 重新渲染页面
                render()
                // 关闭弹出层
                layer.close(index)
            }
        }
    })
})



// --------------------------------  编辑操作 ------------------------------------
let edit
$('body').on('click', 'button:contains("编辑")', function () {
    // 获取数据源的值
    let data = $(this).data()

    edit = layer.open({
        type: 1,
        title: '编辑分类',
        content:$('#tpl-edit').html(),
        area: ['500px', '250px'],

        success: function (res) {
             // 加载form模块
            let form = layui.form
            // form.val('表单中的lay-filter属性值','对象格式的数据（并且对象的键必须和input的name一样）')；
            form.val('edit',data)    //这种方法可以获取全部表单元素
         }
    });
    
    
})


// -------------------------------完成编辑----------------------------
$('body').on('submit', '#form-edit', function (e) {
    // 阻止默认行为
    e.preventDefault()

    let data = $(this).serialize()
    $.ajax({
        type: 'post',
        url: '/my/category/update',
        data: data,
        success: function (res) {
            // 无论修改成功，还是失败，都给出提示
            layer.msg(res.message);
            // 判断是否成功
            if (res.status == 0) {
                // 重新渲染页面
                render()
                // 关闭弹出层
                layer.close(edit)
            }
        }
    })
})